<template>
  <div id="chats">
    <!-- 左侧会话列表 -->
    <ul class="session-list">
      <li class="session-item" 
          v-for="(session, index) in sessionList" :key="index" 
          @click="setCurrentSession(session)" 
          :class="{active:currentSession.accepter.friendId===session.accepter.friendId}"
          @contextmenu="showMenu(session, $event)"
      >
        <div class="avatar">
          <Badge :count="session.count"><img :src="imgBaseUrl+session.accepter.friendImg" alt=""></Badge>
        </div>
        <div class="info">
          <span class="info-alias">{{session.accepter.friendAlias}}</span>
          <span class="info-msg">{{session.messages.length ? session.messages[session.messages.length-1].msg : ''}}</span>
        </div>
      </li>
    </ul>
    <!-- 右侧会话窗口 -->
    <ChatWindow :currentSession="currentSession"/>
    <!-- 右键显示菜单 -->
    <div class="menu" ref="menu" v-show="isShow">
      <div class="dont-disturb">消息免打扰</div>
      <div class="delete-session">删除聊天</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ChatWindow from '@/components/ChatWindow/ChatWindow.vue'
export default {
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    ...mapState(['userInfo', 'sessionList', 'imgBaseUrl', 'currentSession'])
  },
  methods: {
    setCurrentSession (session) {
      const currentSession = session
      this.$store.dispatch('getCurrentSession', {currentSession}) // 将会话设置为currentSession
      this.$store.commit('clearCurrentSessionCount') // 并清零未读消息
    },
    showMenu (session, event) {
      event.preventDefault() // 取消默认的浏览器自带右键
      if (this.isShow === false) {
        this.isShow = true
        this.$refs.menu.style.left = event.clientX + 'px'
        this.$refs.menu.style.top = event.clientY + 'px'
      } else {
        this.isShow = false
        setTimeout(() => {
          this.isShow = true
          this.$refs.menu.style.left = event.clientX + 'px'
          this.$refs.menu.style.top = event.clientY + 'px'
        }, 100)
      }
    }
  },
  mounted () {
    document.addEventListener('click', () => {
      if (this.isShow) {
        this.isShow = false
      }
    })
  },
  components: {
    ChatWindow
  }
}
</script>

<style lang="stylus">
#chats
  position absolute
  left 70px
  top 0
  bottom 0
  right 0
  background #f3f3f3
  .session-list
    width 310px
    position absolute
    top 75px
    bottom 0
    overflow auto
    background-color #eaeaea
    .session-item
      height 80px
      // 注意hover和active顺序不能调换，优先级相同，后面的覆盖前面的
      &:hover
        background-color #d8d8d8
      &.active
        background-color #bdbdbd
      .avatar
        height 80px
        width 80px
        float left
        padding 15px
        img
          height 100%
          width 100%
        .ivu-badge-count
          box-shadow none
      .info
        float left
        width 180px
        height 100%
        .info-alias
          display block
          font-size 18px
          padding-top 13px
          color #000
        .info-msg
          display block
          padding-top 8px
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
  .menu
    width 140px
    height 70px
    position fixed
    background-color #f7f7f7
    border-radius 1px
    box-shadow 1px 1px 8px #888
    border 1px solid #eee
    z-index 99
    .dont-disturb
      height 35px
      text-align center
      line-height 35px
      color #000
    .delete-session
      height 35px
      text-align center
      line-height 35px
      border-top 1px solid #eee
      color #000
</style>
